<template>
    <v-dialog v-model="loginFlag" :fullscreen="isMobile" max-width="460">
        <v-card class="login-container" style="border-radius:4px">
            <v-icon class="float-right" @click="loginFlag = false">
                mdi-close
            </v-icon>
            <div class="login-wrapper">
              <div style="margin-left:200px">
                <button @click="openfaceLogin">人脸识别登录</button>
              </div>
              <!-- 用户名 -->
                <v-text-field
                        v-model="form.username"
                        label="邮箱号"
                        placeholder="请输入您的邮箱号"
                        clearable
                        @keyup.enter="login"
                />
                <!-- 密码 -->
                <v-text-field
                        v-model="form.password"
                        class="mt-7"
                        label="密码"
                        placeholder="请输入您的密码"
                        @keyup.enter="login"
                        :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                        :type="show ? 'text' : 'password'"
                        @click:append="show = !show"
                />
                <!-- 按钮 -->
              <silder-verify @success="handleSuccess" @failed="handleError"></silder-verify >
                <v-btn
                        class="mt-7"
                        block
                        color="blue"
                        style="color:#fff"
                        @click="login"
                >
                    登录
                </v-btn>
                <!-- 注册和找回密码 -->
                <div class="mt-10 login-tip">
                    <span @click="openRegister">立即注册  </span>
                    <span @click="openPhoneRegister">   手机验证码免密登录</span>
                    <span @click="openForget" class="float-right">忘记密码?</span>
                </div>
                <div class="social-login-title">社交账号登录</div>
                <div class="social-login-wrapper">
<!--                    &lt;!&ndash; 微博登录 &ndash;&gt;-->
<!--                    <a-->
<!--                            class="mr-3 iconfont iconweibo"-->
<!--                            style="color:#e05244"-->
<!--                            @click="weiboLogin"-->
<!--                    />-->
                    <!-- qq登录 -->
                    <a class="iconfont iconqq" style="color:#00AAEE" @click="qqLogin('qq')"/>
                </div>
            </div>
        </v-card>
    </v-dialog>
</template>

<script>
    import request from '../../utils/request'
    import {activeRouter} from "@/utils/permission";
    import SilderVerify from "@/components/SilderVerify";

    export default {
      components:{
        SilderVerify
      },
        data: function () {
            return {
                form: {
                    username: "",
                    password: "",
                },
                valid:false,
                show: false
            };
        },
        created() {
            if (sessionStorage.getItem("user") === null) {
                this.$store.state.loginFlag = true;
            }
        },
        mounted() {

            // 获取地理位置
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                // if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    const province = r.address.province
                    const city = r.address.city
                    localStorage.setItem("location", province + city)
                // }
            });
        },


        computed: {
            loginFlag: {
                set(value) {
                    this.$store.state.loginFlag = value;
                },
                get() {
                    return this.$store.state.loginFlag;
                }
            },
            isMobile() {
                const clientWidth = document.documentElement.clientWidth;
                if (clientWidth > 960) {
                    return false;
                }
                return true;
            }
        },
        methods: {
          handleSuccess(){
            this.valid = true
          },
          openRegister() {
                this.$store.state.loginFlag = false;
                this.$store.state.registerFlag = true;
            },
          openfaceLogin() {
            this.$store.state.loginFaceFlag = true;
            this.$store.state.loginFlag = false;
          },
          openPhoneRegister() {
            this.$store.state.loginFlag = false;
            this.$store.state.registerMobileFlag = true;
          },
            openForget() {
                this.$store.state.loginFlag = false;
                this.$store.state.forgetFlag = true;
            },
            login() {
            if (this.valid){
              var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
              if (!reg.test(this.form.username)) {
                this.$toast({type: "error", message: "邮箱格式不正确"});
                return false;
              }
              if (this.form.password.trim().length == 0) {
                this.$toast({type: "error", message: "密码不能为空"});
                return false;
              }
            }else {
              this.$toast({type: "error", message: "请拖动滑动条进行验证"});
              return false;
            }
                request.post('/user/login', this.form).then(res => {
                    if (res.msg == '20000' ) {
                        this.$toast({type: "success", message: "登录成功"});
                        sessionStorage.setItem("user", JSON.stringify(res.data))  // 缓存用户信息
                        // localStorage.setItem("user",JSON.stringify(res.data))
                        this.$store.commit("login", res.data);
                        this.$store.commit("closeModel");
                        // this.$store.commit("login", res.data);
                        // this.$router.push("/") //登录成功之后进行页面跳转
                        // const permissions = res.data.permissions;
                        activeRouter()
                        this.$router.go(0)
                        this.loginFlag = false
                    } else {
                        this.$toast({type: "error", message: res.msg})
                    }

                    this.form = {}
                })


                /*  const that = this;
                  // eslint-disable-next-line no-undef
                  var captcha = new TencentCaptcha(this.config.TENCENT_CAPTCHA, function(
                    res
                  ) {*/
                /* if (res.ret === 0) {
                   //发送登录请求
                   let param = new URLSearchParams();
                   param.append("username", that.username);
                   param.append("password", that.password);
                   that.axios.post("/api/login", param).then(({ data }) => {
                     if (data.flag) {
                       that.username = "";
                       that.password = "";
                       that.$store.commit("login", data.data);
                       that.$store.commit("closeModel");
                       that.$toast({ type: "success", message: data.message });
                     } else {
                       that.$toast({ type: "error", message: data.message });
                     }
                   });
                 }
               });
               // 显示验证码
               captcha.show();*/
            },
            qqLogin(value) {
                if (value == "qq") {
                    // var _this = this;
                    request.get('/qq/oauth').then(resp => {
                        //window.open(resp.data.result, "_blank")
                        var width = width || 900;
                        var height = height || 540;
                        var left = (window.screen.width - width) / 2;
                        var top = (window.screen.height - height) / 2;
                        window.open(resp.data, "_blank",
                            "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, left=" +
                            left + ", top=" + top + ", width=" + width + ", height=" + height);
                    }).catch(fail => {
                        console.error(fail)
                    })
                }
                /* console.log(value)
                    //保留当前路径
                    this.$store.commit("saveLoginUrl", this.$route.path);
                    if (
                        navigator.userAgent.match(
                            /(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i
                        )
                    ) {
                        // eslint-disable-next-line no-undef
                        QC.Login.showPopup({
                            appId:'102003420',
                            redirectURI: 'http://www.personcoder.com/user'
                        });
                    } else {
                        window.open(
                            "https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=" +
                            +"102003420" +
                            "&response_type=token&scope=all&redirect_uri=" +
                            "http://www.personcoder.com/user",
                            "_self"
                        );
                    }*/
            },
            weiboLogin() {
                //保留当前路径
                this.$store.commit("saveLoginUrl", this.$route.path);
                window.open(
                    "https://api.weibo.com/oauth2/authorize?client_id=" +
                    this.config.WEIBO_APP_ID +
                    "&response_type=code&redirect_uri=" +
                    this.config.WEIBO_REDIRECT_URI,
                    "_self"
                );
            }
        }
    };
</script>

<style scoped>
    .social-login-title {
        margin-top: 1.5rem;
        color: #b5b5b5;
        font-size: 0.75rem;
        text-align: center;
    }

    .social-login-title::before {
        content: "";
        display: inline-block;
        background-color: #d8d8d8;
        width: 60px;
        height: 1px;
        margin: 0 12px;
        vertical-align: middle;
    }

    .social-login-title::after {
        content: "";
        display: inline-block;
        background-color: #d8d8d8;
        width: 60px;
        height: 1px;
        margin: 0 12px;
        vertical-align: middle;
    }

    .social-login-wrapper {
        margin-top: 1rem;
        font-size: 2rem;
        text-align: center;
    }

    .social-login-wrapper a {
        text-decoration: none;
    }
</style>
